import QtQuick 1.1
import com.nokia.meego 1.1
import com.nokia.extras 1.1
import QtMobility.location 1.1

Page {
	orientationLock: PageOrientation.LockPortrait

	property alias latitude: latitudeField.text
	property alias longitude: longitudeField.text
	property alias locationName: locationNameField.text
	property alias compassMode: compassSelectionDialog.selectedIndex

	PageHeader {
		id: header
        text: qsTr("Instellingen")
	}

	Column {
		id: column1
		anchors {
			top: header.bottom
			left: parent.left
			right: parent.right
			margins: UiConstants.DefaultMargin
		}

		spacing: 5

		Label {
            text: qsTr("Plaatsnaam:")
		}

		TextField {
			id: locationNameField
            placeholderText: qsTr("Vul plaatsnaam in")
			anchors {
				left: parent.left
				right: parent.right
			}
			onTextChanged: settings.settingsUpdated()
		}

		Label {
            text: qsTr("Noorderbreedte:")
		}

		TextField {
			id: latitudeField
            placeholderText: qsTr("Vul noorderbreedte in, in decimalen")
			inputMethodHints: Qt.ImhDigitsOnly | Qt.ImhNoPredictiveText
			validator: DoubleValidator{bottom: -90; top: 90;}
			onTextChanged: settings.settingsUpdated()
		}

		Label {
            text: qsTr("Oosterlengte:")
		}

		TextField {
			id: longitudeField
            placeholderText: qsTr("Vul oosterlengte in, in decimalen")
			inputMethodHints: Qt.ImhDigitsOnly | Qt.ImhNoPredictiveText
			validator: DoubleValidator{bottom: -180; top: 180;}
			onTextChanged: settings.settingsUpdated()
		}
	}

	Column {
		id: column2
		anchors {
			top: column1.bottom
			left: parent.left
			right: parent.right
			topMargin: 50
		}

		spacing: 30

		Item {
			anchors {
				left: parent.left
				right: parent.right
			}
			height: searchButton.height

			Button {
				id: searchButton
				property bool searchActive: false

                text: qsTr("Plaatsnaam opzoeken")
				onClicked: {
					// See http://calendar42.com/bag42/ for details

					searchButton.searchActive = true;

					var doc = new XMLHttpRequest();
					doc.onreadystatechange = function() {
						if (doc.readyState == XMLHttpRequest.DONE) {
							searchButton.searchActive = false;

							if (doc.status == 200) {
								// Data retrieved.

								var locData;

								try {
									locData = JSON.parse(doc.responseText);
								} catch (ex) {
								}

								// Check if a location could be determined
								if (locData) {
									if (locData.status == 'OK') {
										var topResult = locData.results[0].geometry.location;

										latitudeField.text = new Number(topResult.lat).toFixed(2);
										longitudeField.text = new Number(topResult.lng).toFixed(2);

                                        infoBanner.showText(qsTr("Locatie plaatsnaam ingevuld"));
										return;
									} else if (locData.status == 'ZERO_RESULTS'){
                                        infoBanner.showText(qsTr("Plaatsnaam niet gevonden"));
										return;
									}
								}
							}
							// trigger error-response
							console.log("Error parsing bag42 result. status, responseText: " + doc.status + ", " + doc.responseText);
                            infoBanner.showText(qsTr("Fout bij het zoeken van plaatsnaam"));
						}
					}

					doc.open("GET", "http://bag42.nl/api/v0/geocode/json?address=" + encodeURIComponent(locationNameField.text));
					doc.send();
				}

				anchors.horizontalCenter: parent.horizontalCenter
			}

			BusyIndicator {
				visible: searchButton.searchActive
				running: searchButton.searchActive
				anchors {
					left: searchButton.right
					verticalCenter: searchButton.verticalCenter
					leftMargin: 24
				}
			}

			ToolIcon {
				visible: !searchButton.searchActive
				anchors {
					left: searchButton.right
					verticalCenter: searchButton.verticalCenter
				}
				iconSource: "image://theme/icon-s-description"
				onClicked: searchInfo.open()
			}
		}

		Item {
			anchors {
				left: parent.left
				right: parent.right
			}

			height: gpsButton.height

			Button {
				id: gpsButton
                text: qsTr("Ophalen GPS-locatie")
				onClicked: positionSource.start()
				anchors.horizontalCenter: parent.horizontalCenter
			}

			BusyIndicator {
				visible: positionSource.active
				running: positionSource.active
				anchors {
					left: gpsButton.right
					verticalCenter: gpsButton.verticalCenter
					leftMargin: 24
				}
			}
		}

		Item {
			anchors {
				left: parent.left
				right: parent.right
			}

			height: compassButton.height

			Button {
				id: compassButton
				text: compassSelectionDialog.model.get(compassSelectionDialog.selectedIndex).text
				onClicked: compassSelectionDialog.open()
				anchors.horizontalCenter: parent.horizontalCenter
			}

			ToolIcon {
				anchors {
					left: compassButton.right
					verticalCenter: compassButton.verticalCenter
				}
				iconSource: "image://theme/icon-s-description"
				onClicked: compassInfo.open()
			}
		}

	}

	tools: ToolBarLayout {
		id: toolBar
		ToolIcon {
			iconId: "toolbar-back"
			onClicked: pageStack.pop()
		}
	}

	InfoBanner{
		function showText(textIn) {
			text = textIn;
			show();
		}

		id: infoBanner
		z: 2
		anchors.top: header.bottom
		anchors.topMargin: 5
	}

	PositionSource {
		id: positionSource
		onPositionChanged: {
			if (position.latitudeValid && position.longitudeValid) {
				latitude = new Number(position.coordinate.latitude).toFixed(2)
				longitude = new Number(position.coordinate.longitude).toFixed(2)
                locationName = qsTr("GPS-locatie: ") + latitude + qsTr(" NB, ") + longitude + qsTr(" OL")
				stop();
                infoBanner.showText(qsTr("GPS-locatie ingevuld"));
			}
		}
	}

	QueryDialog {
		id: searchInfo
        titleText: qsTr("Zoeken op plaatsnaam")
        message: qsTr("U kunt zoeken op adres, of op naam van een plaats, buurt, wijk of bezienswaardigheid " +
                 "binnen Nederland. Vul de te zoeken naam in bij \"Plaatsnaam\" en druk op \"Plaatsnaam opzoeken\".\n\nVoorbeelden: \"Enschede\", \"Efteling\", \"Grote markt, Groningen\"")
        acceptButtonText: qsTr("Ok")
	}

	SelectionDialog {
        id: compassSelectionDialog
        titleText: qsTr("Kompasmode")
		selectedIndex: 1
		model: ListModel {            
            ListElement { text: "" }
            ListElement { text: "" }
            ListElement { text: "" }
            Component.onCompleted: {
                get(0).text = qsTr("Geen kompas");
                get(1).text = qsTr("Toon kompasmarker")
                get(2).text = qsTr("Draai kaart met kompas")
            }
        }
	}

	QueryDialog {
		id: compassInfo
        titleText: qsTr("Kompas op radarweergave")
        message: qsTr("De radarweergave kan het kompas van uw mobiel gebruiken, zodat u kunt zien uit welke richting de neerslag komt.\n\n" +
                 "De optie \"Toon kompasmarker\" geeft met een pijl de huidige oriëntatie van uw mobiel t.o.v. de kaart weer. De optie \"Draai kaart met kompas\" draait de kaart a.d.h.v. de oriëntatie van uw mobiel. De optie \"Geen kompas\" schakelt de kompasfunctionaliteit uit.")
        acceptButtonText: qsTr("Ok")
	}
}
